<template>
	<!-- 轮播图组件 页面 -->
	<div style="width: 100%;">
		<Header></Header>

		<div style="width: 1000px;margin: auto;margin-top: 30px;">
			<el-button class="tianjia" style="margin-bottom: 20px;" type='danger' @click="showDialog">添加轮播图</el-button>
			<el-table :data="zxs" style="width: 100%">
				<el-table-column label="序号" width="100">
					<template #default="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>

				<el-table-column width="300" label="图片">
					<template #default="scope">
						<img :src="scope.row.img" width="180" height="60">
					</template>
				</el-table-column>

				<el-table-column label="操作" width="200">
					<template #default="scope">
						<el-button size="small" type='daner' @click="deleteSupplier(scope.row,scope.$index)">删除
						</el-button>
						<el-button size="small" type='daner' @click="editSupplier(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog v-model="show" title="修改轮播" width="60%">
				<el-form :model="zx" :rules="rules" ref="shouhuo">

					<el-form-item label="图片路径" prop="img" label-width="600">
						<el-input v-model="zx.img" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label-width="600">
						<el-button @click="show=false">取消</el-button>
						<el-button type="primary" @click="update()">修改</el-button>
					</el-form-item>
				</el-form>


			</el-dialog>
			<el-dialog v-model="show1" title="添加轮播" width="60%">
				<el-form :model="zx1" :rules="rules" ref="shouhuo">

					<el-form-item label="图片" prop="ztext" label-width="600">
						<el-input v-model="zx1.img" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label-width="600">
						<el-button @click="show1 = false">取消</el-button>
						<el-button type="primary" @click="add()">添加</el-button>
					</el-form-item>
				</el-form>


			</el-dialog>
		</div>
	</div>
</template>
<script>
	import Axios from 'axios'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import router from "../route/index.js"
	import Header from './Header'
	export default {
		name: 'ZixunManager',
		components: {
			Header
		},
		data() {
			return {
				zxs: [],
				users: {},
				show: false,
				show1: false,
				zx: {},
				zx1: {},
				rules: {
					title: [{
						required: true,
						message: '请填写标题',
						trigger: 'blur'
					}],
					ztext: [{
						required: true,
						message: '请填写内容',
						trigger: 'blur'
					}],
					dznum: [{
						required: true,
						message: '请填写点赞数',
						trigger: 'blur'
					}]
				}

			}
		},
		created() {
			this.getUsers();
			this.getSupplier();
		},
		methods: {
			getUsers() {
				// 获取sessionstorage中的用户信息
				let str = sessionStorage.getItem('users')
				if (str != null) {
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
				} else {
					alert('请先登录')
				}
			},
			getSupplier() {
				Axios.post('/shopmng/api/lunbo/select').then(res => {
					this.zxs = res.data;
				});
			},
			formatTime(val) {
				return val.substr(0, 10)
			},
			deleteSupplier(obj, index) {
				ElMessageBox.confirm(
					'确认删除吗？', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					Axios.post('/shopmng/api/lunbo/deleteOne', {
						'lid': obj.lid
					}).then(res => {
						if (res.data.affectedRows == 1) {
							this.zxs.splice(index, 1);
							ElMessage({
								message: '删除成功',
								type: 'success',
							});
						} else {
							ElMessage({
								message: '删除失败',
							});
						}
					});

				})
			},

			editSupplier(val) {
				this.zx = val;
				this.show = true;
			},
			update() {
				Axios.post('/shopmng/api/lunbo/update', this.zx).then(res => {
					if (res.data.affectedRows == 1) {
						this.getSupplier();
						ElMessage({
							message: '修改成功',
							type: 'success',
						});

					} else {
						ElMessage({
							message: '修改失败',
						});
					}
					this.show = false;
				});
			},
			showDialog() {
				this.show1 = true;
			},
			add() {
				this.zx1.uid = this.users.uid;
				Axios.post('/shopmng/api/lunbo/add', this.zx1).then(res => {
					if (res.data.affectedRows == 1) {
						this.getSupplier();
						ElMessage({
							message: '修改成功',
							type: 'success',
						});

					} else {
						ElMessage({
							message: '修改失败',
						});
					}
					this.show1 = false;
				});
			}



		}

	}
</script>

<style>
</style>
